<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 单行文本溢出（重要）
            text-overflow：clip|ellipsis|string
            属性值：
            ​	clip：修剪文本。
            ​	ellipsis（常用）：显示省略符号来代表被修剪的文本 */
      p {
        width: 300px;
        /*height: 100px;*/
        white-space: nowrap; /*不允许换行*/
        border: 1px solid #000;
        /*overflow: hidden;/*超出部分隐藏*/
      }
      .p2 {
        -ms-text-overflow: ellipsis; /*对低版本IE进行兼容*/
        text-overflow: ellipsis; /*设置隐藏部分样式*/
        overflow: hidden; /*超出部分隐藏*/
      }
      .p3 {
        -ms-text-overflow: clip;
        text-overflow: clip;
        overflow: hidden;
      }
      /*多行文本溢出*/
      .p4 {
        width: 300px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <p class="p1">
      CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。
    </p>
    <p class="p2">
      CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。
    </p>
    <p class="p3">
      CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。
    </p>

    <p class="p4">
      CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。
    </p>
  </body>
</html>
